<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>附加导航插件</title>
	<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
	<style>
		.nav-pills {
			width: 150px;
		}

		.nav-pills.affix {
			top: 30px;
		}
	</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy">
<!-- 
	1.基本	响应式下做(.container 、.row)
		1)	.jumbotron 						//对container内第一层添加
		2)	data-spy="affix" 				//对ul添加。类似fix的功能，y轴上居中显示
		3)	data-spy="scroll" 				//对body添加
		4)	data-target="id名称"	//对body添加。同时给ul的父容器添加该id。3和4的作用是拖动的时候，左侧导航按钮会对应变成.active
		5)	data-offset-top="150" 			//对ul添加。top值一般就是.jumbotron块的高度没，这里是150px
				2和5可以同JS一起改写,如下
				$('ul').affix({
					offset : {
						top : 150
					}
				})
		6)	在CSS样式表中添加.nav-pills.affix添加top值,这个值最好是.jumbotron的margin-bottom(默认是30px)的值，这样效果最平滑
		7) 	有个bug，往上移动到顶部时active消失。【更改bootstrap的低版本3.0.3】

	2.事件(但是以下在3.0.3版本不支持)
		1)	affix-bs-affix    				//在定位之前立即触发
			affixed-bs-affix    			//在定位之后立即触发
			affix-top.bs.affix 				//在定位元素应用affixed-top效果之前触发(同理还有bottom)
			affixed-top.bs.affix			//在定位元素应用affixed-top效果之后触发(同理还有bottom)
	
		格式：
			$('ul').on('affix.bs.affix', function () {
				alert('定位之前触发')
			})

 -->
	
	<div class="container">
		<div class="jumbotron" style="height: 150px;">
			<h2>Bootstrap Affix</h2>
		</div>
		<div class="row">
			<div class="col-xs-3" id="myScrollspy">
				<!-- <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="150"> -->
				<ul class="nav nav-pills nav-stacked"> 	<!-- 用JS表达上面那句话 -->
					<li class="active"><a href="#section-1">HTML</a></li>
					<li><a href="#section-2">Bootstrap</a></li>
					<li><a href="#section-3">JQuery</a></li>
					<li><a href="#section-4">ExtJS</a></li>
				</ul>
			</div>
			<div class="col-xs-9">
				<h2 id="section-1">HTML</h2>
				<p>标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group（Web超文本应用技术工作组 -WHATWG） 的组织。WHATWG 致力于 Web 表单和应用程序，而W3C（World Wide Web Consortium，万维网联盟） 专注于XHTML2.0。在2006年，双方决定进行合作，来创建一个新版本的HTML。HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML工作团队。HTML5的第一份正式草案已于2008年1月22日公布。HTML5仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”2013年5月6日， HTML 5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。本次草案的发布，从2012年12月27日至今，进行了多达近百项的修改，包括HTML和XHTML的标签，相关的API、Canvas等，同时HTML5的图像img标签及svg也进行了改进，性能得到进一步提升。</p>
				<h2 id="section-2">Bootstrap</h2>
				<p>Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。[1] 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。[2] 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。</p>
				<h2 id="section-3">JQuery</h2>
				<p>JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。</p>
				<h2 id="section-4">ExtJS</h2>
				<p>自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些也算可以想到的功能。</p>
			</div>
		</div>
	</div>



	<script src="bootstrap-3.3.5-dist/jquery/jquery.min.js"></script>
	<script src="bootstrap-3.0.3/js/bootstrap.min.js"></script>
	<script>
		// 将data-offset-top="150"和data-spy="affix"改写为JS
		
		$('ul').affix({
			offset : {
				top : 150
			}
		})
	</script>
</body>
</html>